<script setup>
import { ref,onMounted, watch } from 'vue'
import { queryAllApi, addClazzApi, delClazzApi, queryClazzByIdApi, updateClazzApi } from '@/api/clazz'
import{queryAllEmpApi} from '@/api/emp'
import { ElNotification,ElMessageBox } from 'element-plus'
const clazzForm = ref({
  name: '',
  endDate: '',
  begin: '',
  end: '',
  page: 1,
  pageSize: 10
})
const clazzList = ref([])
// 分页数据
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
//  班主任列表
const masterOptions = ref([])
// 学科列表
const subjectOptions = ref([
  {id: 1, name: 'Java'},
  {id: 2, name: '前端'},
  {id: 3, name: '嵌入式'},
  {id: 4, name: '大数据'},
  {id: 5, name: 'Python'},
  {id: 5, name: 'Go'},
])
// 修改增加弹窗框
const dialogVisible = ref(false)
// 修改员工表单标题
const dialogTitle = ref('')
// 修改员工表单
const diglogFromClazz = ref({
  name: '',
  room: '',
  beginDate: '',
  endDate: '',
  masterId: '',
  subject: ''
})
// 表单验证
const ruleClazzRef = ref()
// 表单验证规则
const clazzRules = ref({
  name: [
    { required: true, message: '请输入班级名称', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 4 到 30 个字符', trigger: 'blur' }
  ],
  room: [
    { message: '请输入教室名称', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 1 到 20 个字符', trigger: 'blur' }
  ],
  beginDate: [
    { required: true, message: '请选择开课时间', trigger: 'change' }
  ],
  endDate: [
    { required: true, message: '请选择结课时间', trigger: 'change' }
  ],
  subject: [
    { required: true, message: '请选择学科', trigger: 'change' }
  ]
})
// 分页器
const handleSizeChange = (val) => {
  clazzForm.pageSize = val
  queryPage()
}
const handleCurrentChange = (val) => {
  clazzForm.page = val
  queryPage()
}
// 侦听clazzForm中的endDate属性
watch(()=>clazzForm.value.endDate,(newValue)=>{
  if(clazzForm.value.endDate){
    clazzForm.value.begin=newValue[0]
    clazzForm.value.end=newValue[1]
  }
  else{
    clazzForm.value.begin=''
    clazzForm.value.end=''
  }

})
// 分页查询
const queryPage = async() => {
  const res = await queryAllApi(
      clazzForm.value.name, 
      clazzForm.value.begin, 
      clazzForm.value.end, 
      clazzForm.value.page, 
      clazzForm.value.pageSize)
    if (res.code == 1){
       clazzList.value = res.data.rows
       total.value = res.data.total
    }
}
// 重置表单
const reset = ()=>{
  clazzForm.value = {
    name: '',
    endDate: '',
    begin: '',
    end: '',
    page: 1,
    pageSize: 10
  }
queryPage()
}
// 去新增
const toAdd = async() => {
  dialogTitle.value = '新增班级'
  dialogVisible.value = true
  diglogFromClazz.value = {name: '',room: '',beginDate: '',endDate: '',masterId: '',subject: ''}

}
// 去修改
const toUpdate = async(id) => {
  dialogTitle.value = '修改班级'
  dialogVisible.value = true
  const res = await queryClazzByIdApi(id)
  diglogFromClazz.value = res.data
}
// 查询所有班主任
const queryAllMaster = async() => {
  const res = await queryAllEmpApi()
  if(res.code == 1){
    masterOptions.value = res.data
  }
}
// 表单提交
const submit = async() => {
  if(!ruleClazzRef.value.validate()){
    return
  }
  await ruleClazzRef.value.validate(async (valid)=>{
    if(valid) {
      if(diglogFromClazz.value.id){
    // 修改
    const res = await updateClazzApi(diglogFromClazz.value)
    if(res.code == 1){
        ElNotification({
        title: '修改成功',
        message: '数据修改',
        type: 'success',
      })
      dialogVisible.value = false
      queryPage()
    }
  }
  else{
    // 新增
    const res = await addClazzApi(diglogFromClazz.value)
    if(res.code == 1){
      ElNotification({
        title: '新增成功',
        message: '数据已添加',
        type: 'success',
      })
      dialogVisible.value = false
      queryPage()
    }
  } 
    }
  })
  
}
// 删除
const toDelete = async(id)=>{
console.log(`Delete item with ID ${id}`);
   ElMessageBox.confirm(
    '是否删除该班级？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      const res = await delClazzApi(id);
      if(res.code == 1){
       ElNotification({
        title: '删除成功',
        message:'数据已被删除',
        type: 'success',
      })
        queryPage()
      }
      else{
        ElNotification({
          title: '删除失败',
          message:res.msg,
          type: 'error',
        })
      }
    })
    .catch(() => {
      ElNotification({
        type: 'info',
        message: '取消删除',
      })
    })
}
//钩子函数
onMounted(() => {
  queryPage()
  queryAllMaster()
})
</script>

<template>
  <div class="clazz-container">
    <div class="header-section">
      <h2 class="page-title">班级管理</h2>
    </div>
    
    <!-- 查询表单 -->
    <el-card class="search-card">
      <el-form :model="clazzForm" :inline="true" label-width="80px">
        <el-form-item label="班级名称">
          <el-input v-model="clazzForm.name" placeholder="请输入班级名称" clearable style="width: 150px;"></el-input> 
        </el-form-item>
        <el-form-item label="结课时间">
          <el-date-picker
            v-model="clazzForm.endDate"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="到"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width: 300px;"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryPage" style="margin-left: 10px;">查询</el-button>
          <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card class="operation-card">
      <el-button type="primary" class="add-btn" @click="toAdd">+新增班级</el-button>
    </el-card>
    
    <!-- 表格展示 -->
    <el-card class="table-card">
      <el-table :data="clazzList" border stripe>
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <el-table-column label="班级名称" prop="name" width="180"></el-table-column>
        <!-- 班级教室 -->
        <el-table-column label="教室" prop="room" width="80"></el-table-column>
        <!--班主任 -->
        <el-table-column label="班主任" prop="masterName" width="100"></el-table-column>
        <el-table-column label="开课时间" prop="beginDate"></el-table-column>
        <el-table-column label="结课时间" prop="endDate"></el-table-column>
        <!-- 状态 -->
        <el-table-column label="状态" prop="status"></el-table-column>
        <!-- 最后修改时间 -->
        <el-table-column label="最后操作时间" prop="updateTime" width="180"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" class="table-btn" @click="toUpdate(scope.row.id)">编辑</el-button>
            <el-button type="danger" size="small" class="table-btn" @click="toDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <!-- 添加修改-->
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="750px" >
      <el-form :model="diglogFromClazz" label-width="80px" ref="ruleClazzRef" :rules="clazzRules" >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="班级名称" prop="name">
              <el-input v-model="diglogFromClazz.name" placeholder="请输入班级名称" ></el-input> 
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班级教室" prop="room">
              <el-input v-model="diglogFromClazz.room" placeholder="请输入教室名称" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开课时间" prop="beginDate">
              <el-date-picker
                v-model="diglogFromClazz.beginDate"
                value-format="YYYY-MM-DD"
                type="date"
                placeholder="选择日期"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结课时间" prop="endDate">
              <el-date-picker
                v-model="diglogFromClazz.endDate"
                value-format="YYYY-MM-DD"
                type="date"
                placeholder="选择日期"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="班主任">
              <el-select v-model="diglogFromClazz.masterId" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in masterOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 学科 -->
            <el-form-item label="学科" prop="subject">
              <el-select v-model="diglogFromClazz.subject" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in subjectOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submit">保 存</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>
.clazz-container {
  padding: 20px;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.page-title {
  color: #303133;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.search-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border: none;
  display: flex;
  align-items: center;
}

.search-card :deep(.el-form) {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.search-card :deep(.el-form-item) {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

.operation-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border: none;
}

.add-btn {
  padding: 10px 20px;
  margin-right: 10px;
}

.table-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border: none;
  margin-bottom: 20px;
}

.table-card :deep(.el-table__header th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

.table-card :deep(.el-table__row:hover) {
  background-color: #f5f7fa;
}

.table-btn {
  margin: 0 5px;
}

.table-btn:first-child {
  margin-left: 0;
}

.table-btn:last-child {
  margin-right: 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0 20px 20px;
}

@media (max-width: 768px) {
  .header-section {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-card :deep(.el-form) {
    flex-wrap: wrap;
  }
  
  .search-card :deep(.el-form-item) {
    margin-bottom: 15px;
  }
  
  .add-btn {
    margin-top: 10px;
    margin-left: 0;
  }
}
</style>